<template>
    <div class="expandCustomerIndexSetOp">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item>标准管控</el-breadcrumb-item>
            <el-breadcrumb-item>标准管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/expandCustomerIndexSet' }">拓客指标设置</el-breadcrumb-item>
            <el-breadcrumb-item>{{pageType=='add'?'新增':'编辑'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>目标设置</h3>
        <!--新增-->
        <el-form v-if="pageType=='add'" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="年度：" prop="year">
                <el-date-picker
                        v-model="ruleForm.year"
                        type="year"
                        value-format="yyyy"
                        placeholder="选择年"
                        @change="yearChange"
                        :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="区域：" prop="areaId">
                <el-select v-model="ruleForm.areaId" placeholder="请选择" @change="selectArea" class="selectWidth">
                    <el-option
                            v-for="item in areaList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="片区：" prop="regionId">
                <el-select v-model="ruleForm.regionId" placeholder="请选择" class="selectWidth" @change="regionChange">
                    <el-option
                            v-for="item in regionList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="指标：" prop="target">
                <el-select v-model="ruleForm.standardType" placeholder="请选择" class="selectWidth" @change="stardardChange">
                    <el-option
                            v-for="item in targetList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <!--编辑-->
        <el-form v-else :model="ruleForm" label-width="100px" class="demo-ruleForm no-margin-bottom">
            <el-form-item label="年度：">
                {{ruleForm.year}}
            </el-form-item>
            <el-form-item label="区域：">
                {{ruleForm.areaName}}
            </el-form-item>
            <el-form-item label="片区：">
                {{ruleForm.regionName}}
            </el-form-item>
            <el-form-item label="指标：">
                {{ruleForm.standradName}}
            </el-form-item>
        </el-form>

        <h3>指标设置</h3>
        <div class="target-set">
            <div class="target-item"><label>汇总指标值：</label><el-input v-model="ruleForm.summary" @input.native="ruleForm.summary=ruleForm.summary.replace(/\D/,'')" maxlength="10"></el-input></div>
            <div class="target-item"></div>
            <div class="target-item"></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>1月：</label><el-input v-model="ruleForm.january" @input.native="ruleForm.january=ruleForm.january.replace(/\D/,'')" :disabled="inputDisabled[0]" maxlength="10"></el-input></div>
            <div class="target-item"><label>2月：</label><el-input v-model="ruleForm.february" @input.native="ruleForm.february=ruleForm.february.replace(/\D/,'')" :disabled="inputDisabled[1]" maxlength="10"></el-input></div>
            <div class="target-item"><label>3月：</label><el-input v-model="ruleForm.march" @input.native="ruleForm.march=ruleForm.march.replace(/\D/,'')" :disabled="inputDisabled[2]" maxlength="10"></el-input></div>
            <div class="target-item"><label>4月：</label><el-input v-model="ruleForm.april" @input.native="ruleForm.april=ruleForm.april.replace(/\D/,'')" :disabled="inputDisabled[3]" maxlength="10"></el-input></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>5月：</label><el-input v-model="ruleForm.may" @input.native="ruleForm.may=ruleForm.may.replace(/\D/,'')" :disabled="inputDisabled[4]" maxlength="10"></el-input></div>
            <div class="target-item"><label>6月：</label><el-input v-model="ruleForm.june" @input.native="ruleForm.june=ruleForm.june.replace(/\D/,'')" :disabled="inputDisabled[5]" maxlength="10"></el-input></div>
            <div class="target-item"><label>7月：</label><el-input v-model="ruleForm.july" @input.native="ruleForm.july=ruleForm.july.replace(/\D/,'')" :disabled="inputDisabled[6]" maxlength="10"></el-input></div>
            <div class="target-item"><label>8月：</label><el-input v-model="ruleForm.august" @input.native="ruleForm.august=ruleForm.august.replace(/\D/,'')" :disabled="inputDisabled[7]" maxlength="10"></el-input></div>
        </div>
        <div class="target-set">
            <div class="target-item"><label>9月：</label><el-input v-model="ruleForm.september" @input.native="ruleForm.september=ruleForm.september.replace(/\D/,'')" :disabled="inputDisabled[8]" maxlength="10"></el-input></div>
            <div class="target-item"><label>10月：</label><el-input v-model="ruleForm.october" @input.native="ruleForm.october=ruleForm.october.replace(/\D/,'')" :disabled="inputDisabled[9]" maxlength="10"></el-input></div>
            <div class="target-item"><label>11月：</label><el-input v-model="ruleForm.november" @input.native="ruleForm.november=ruleForm.november.replace(/\D/,'')" :disabled="inputDisabled[10]" maxlength="10"></el-input></div>
            <div class="target-item"><label>12月：</label><el-input v-model="ruleForm.december" @input.native="ruleForm.december=ruleForm.december.replace(/\D/,'')" :disabled="inputDisabled[11]" maxlength="10"></el-input></div>
        </div>

        <div v-if="pageType=='edit'">
            <h4>操作记录</h4>
            <el-table :data="logs" border>
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="standardDetail" label="调整指标"></el-table-column>
                <el-table-column prop="createTime" label="时间"></el-table-column>
                <el-table-column prop="operating" label="操作"></el-table-column>
                <el-table-column prop="userName" label="姓名"></el-table-column>
            </el-table>
        </div>

        <div class="set-btn">
            <el-button @click="cancelHandle">取消</el-button>
            <el-button type="primary" @click="submitHandle">保存</el-button>
        </div>
    </div>
</template>

<script>

export default {
    name:"expandCustomerIndexSetOp",
    created() {
        this.pageType = this.$route.query.type
        if(this.pageType=='add'){
            this.initAreaList()
        }else {
            this.$axios.post('/spread/standard/getData',{id:this.$route.query.id}).then(res=>{
                this.ruleForm = Object.assign(this.ruleForm,res)
                this.logs = res.spreadStandardLogList

                let now = new Date()
                this.inputDisabled = []
                if(this.ruleForm.year==now.getFullYear()){
                    for(let i=0; i<12;i++){
                        const month = now.getMonth()
                        if(i<month){
                            this.inputDisabled.push(true)
                        }else{
                            this.inputDisabled.push(false)
                        }
                    }
                }
            })
        }
    },
    mounted() {},
    components: {},
    data() {
        return {
            inputDisabled:[],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now();
                },
            },
            logs: [],
            ruleForm:{
                rangeType: 1,
                year: undefined,
                areaId: undefined,
                regionId: undefined,
                standardType: 1,
                summary: 0,
                january: 0,
                february: 0,
                march: 0,
                april: 0,
                may: 0,
                june: 0,
                july:0,
                august: 0,
                september: 0,
                october: 0,
                november: 0,
                december: 0
            },
            rules: {
                year: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                areaId: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                regionId: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
            },
            areaList: [],
            regionList: [],// 片区
            targetList: [
                {id: 1, name: '拜访量'},
                {id: 2, name: '拓客量'},
            ],// 指标
        }
    },
    methods: {
        mySelectChange(){
            const temp = {
                summary: '',
                january: 0,
                february: 0,
                march: 0,
                april: 0,
                may: 0,
                june: 0,
                july:0,
                august: 0,
                september: 0,
                october: 0,
                november: 0,
                december: 0
            }
            this.ruleForm = Object.assign(this.ruleForm,temp)
        },
        yearChange(){
            this.mySelectChange()
            this.inputDisabled=[]
            const now = new Date()
            if(this.ruleForm.year==now.getFullYear()){
                for(let i=0; i<12;i++){
                    const month = now.getMonth()
                    if(i<month){
                        this.inputDisabled.push(true)
                    }else{
                        this.inputDisabled.push(false)
                    }
                }
            }else {
                for(let i=0; i<12;i++){
                    this.inputDisabled.push(false)
                }
            }
        },
        // 区域列表
        initAreaList(){
            this.$axios.get('/cms/sys/region/getAreaList').then(res=>{
                this.areaList = res
                this.areaList.unshift({id:undefined,name:'全部'})
            })
        },
        selectArea(){
            this.ruleForm.regionId = ''
            this.$axios.get('/cms/sys/region/getRegion/'+this.ruleForm.areaId).then(res=>{
                this.regionList = res
            })
            this.mySelectChange()
        },
        regionChange(){
            this.mySelectChange()
        },
        stardardChange(){
            this.mySelectChange()
        },
        submitHandle(){
            if(this.pageType=='add'){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        if((this.ruleForm.summary || this.ruleForm.summary===0)
                            && (this.ruleForm.january || this.ruleForm.january===0)
                            && (this.ruleForm.february || this.ruleForm.february===0)
                            && (this.ruleForm.march || this.ruleForm.march===0)
                            && (this.ruleForm.april || this.ruleForm.april===0)
                            && (this.ruleForm.may || this.ruleForm.may===0)
                            && (this.ruleForm.june || this.ruleForm.june===0)
                            && (this.ruleForm.july || this.ruleForm.july===0)
                            && (this.ruleForm.august || this.ruleForm.august===0)
                            && (this.ruleForm.september || this.ruleForm.september===0)
                            && (this.ruleForm.october || this.ruleForm.october===0)
                            && (this.ruleForm.november || this.ruleForm.november===0)
                            && (this.ruleForm.december || this.ruleForm.december===0)
                        ){
                            const area = this.areaList.find((item) => {
                                return item.id == this.ruleForm.areaId
                            })
                            this.ruleForm.areaName = area.name
                            const region = this.regionList.find((item) => {
                                return item.id == this.ruleForm.regionId
                            })
                            this.ruleForm.regionName = region.name
                            this.$axios.post('/spread/standard/save',this.ruleForm).then(res=>{
                                this.$message.success('保存成功')
                                this.$router.push({path: '/expandCustomerIndexSet'})
                            })

                        } else {
                            this.$message.info('请设置指标')
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            } else {
                if((this.ruleForm.summary || this.ruleForm.summary===0)
                    && (this.ruleForm.january || this.ruleForm.january===0)
                    && (this.ruleForm.february || this.ruleForm.february===0)
                    && (this.ruleForm.march || this.ruleForm.march===0)
                    && (this.ruleForm.april || this.ruleForm.april===0)
                    && (this.ruleForm.may || this.ruleForm.may===0)
                    && (this.ruleForm.june || this.ruleForm.june===0)
                    && (this.ruleForm.july || this.ruleForm.july===0)
                    && (this.ruleForm.august || this.ruleForm.august===0)
                    && (this.ruleForm.september || this.ruleForm.september===0)
                    && (this.ruleForm.october || this.ruleForm.october===0)
                    && (this.ruleForm.november || this.ruleForm.november===0)
                    && (this.ruleForm.december || this.ruleForm.december===0)
                ){
                    this.$axios.post('/spread/standard/update',this.ruleForm).then(res=>{
                        this.$message.success('保存成功')
                        this.$router.push({path: '/expandCustomerIndexSet'})
                    })

                } else {
                    this.$message.info('请设置指标')
                }
            }

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        cancelHandle(){
            this.$router.back()
        }
    },
    computed: {
    }
}
</script>
<style lang="stylus" scoped>
    .expandCustomerIndexSetOp {
        h3{
            border-bottom: 1px solid #ccc;
        }
        .selectWidth{
            width: 220px;
        }
        .target-set{
            display: flex;
            margin-bottom: 10px;
            padding-right: 20px;
            .target-item{
                flex: 1
                display: flex;
                label{
                    width: 120px;
                    line-height: 40px;
                    text-align: right;
                }
            }
        }
        .set-btn{
            margin: 20px 20px 0 0;
            text-align:right;
        }
    }
</style>
<style>
    .expandCustomerIndexSetOp .no-margin-bottom .el-form-item{
        margin-bottom: 0;
    }
</style>
